<template>
    <el-container class="app-container">
        <el-aside width="200px" class="app-aside">
            <ul class="app-sidebar">
              <li v-for="(item, index) in sidebarList" :key="index" @click="addItem(index, item)">
                <span>{{item.endName}}</span>
              </li>
            </ul>
        </el-aside>
        <el-main class="app-main">
              <div class="drag-box">
                <div class="my-box">
                  <div class="my-box-header"></div>
                  <div class="my-box-body"></div>
                  <template v-for="(element, index) in componentList">
                    <vue-draggable-resizable :parent="true" :w="10" :h="10" :minw="5" :minh="5" :x="element.x" :y="element.y" :key="index" v-on:dragging="onDrag" :resizable="true" @activated="onActivated(index,element)"  >
                      <span v-bind:style="{fontSize: element.fontSize+'px', color: element.color, 'font-family': element.fontFamily}">{{element.frontName!=''?element.frontName+':':''}}{{element.endName}}</span>
                    </vue-draggable-resizable>
                  </template>
                </div>
              </div>

              <div class="shuxing-box">
                <h3>组件信息</h3>
                <p>{{activeComponent.name}}</p>
                <form action="">
                  <div class="input-group">
                    x: <input type="text" size="small" v-model="activeComponent.x"  autocomplete="off"> y: <input type="text" v-model="activeComponent.y" autocomplete="off">
                  </div>
                  <div class="input-group">
                    文字大小：
                    <el-input-number size="small" v-model="activeComponent.fontSize" :min="1" :max="100" label="描述文字"></el-input-number>
                    文字风格： 
                    <select v-model="activeComponent.fontFamily" >
                      <option value="微软雅黑">微软雅黑</option>
                      <option value="华文楷体">华文楷体</option>
                      <option value="黑体">黑体</option>
                      <option value="宋体">宋体</option>
                    </select>
                    文字颜色：
                    <el-color-picker v-model="activeComponent.color" size="small"></el-color-picker>
                    前缀文字： <input type="text" v-model="activeComponent.frontName"> 后缀文字： <input type="text" v-model="activeComponent.endName">
                  </div>
                  <div class="input-group">
                    <button type="button">确认</button>
                    <button type="button" @click="resetItem">重置</button>
                    <button type="button" @click="removeItem">删除</button>
                  </div>
                </form>
              </div>
        </el-main>
    </el-container>

</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  name: 'home',
  components: {
    HelloWorld,
    VueDraggableResizable
  },
  data() {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      componentList: [
      ],
      sidebarList: [
        {'endName':'名称', name:'name'},
        {'endName':'价格', name: 'salePrice'},
        {'endName':'促销价', name: 'cuxiao'},
        {'endName':'产地', name: 'chandi'},
        {'endName':'品牌', name: 'brand'},
        {'endName':'单位', name: 'danwei'},
        {'endName':'库存', name: 'kucun'},
        {'endName':'附加信息1', name: 'remark1'},
        {'endName':'附加信息2', name: 'remark2'},
      ],
      activeIndex: null,
      activeComponent: {}
    }
  },
  methods: {
    // onResize: function (x, y, width, height) {
    //   this.x = x
    //   this.y = y
    //   this.width = width
    //   this.height = height
    // },
    onActivated: function(index, item) {
      this.activeIndex = index;
      this.activeComponent = item;
    },
    onDrag: function (x, y) {
      this.activeComponent.x = x
      this.activeComponent.y = y
    },
    addItem(index, item) {
      this.componentList.push({'endName': item.endName,name: item.name, frontName:'', x:0, y:0, fontSize: 15, color: '#000', fontFamily: '微软雅黑'});
    },
    removeItem() {
      if(this.activeIndex !== null) {
        this.componentList.splice(this.activeIndex, 1)
      }
    },
    resetItem() {
      this.componentList[this.activeIndex].x = 0;
      this.componentList[this.activeIndex].y = 0;
      this.componentList[this.activeIndex].fontSize = 15;
      this.componentList[this.activeIndex].color = '#000';
      this.componentList[this.activeIndex].fontFamily = '微软雅黑';
      this.componentList[this.activeIndex].frontName = '';
    }
  }
}
</script>

<style lang="less">
.app-container{
    position: absolute;
    top:0;
    bottom:0;
    height: 100%;
    width: 100%;
    .app-aside{
        background-color: #545c64;
    }
    .app-sidebar{
      list-style: none;
      margin: 0;
      padding: 0;
      color: #fff;
      text-align: center;
      li{
        line-height: 50px;
      }
      li:hover{
        color: yellow;
        cursor: pointer;
        background-color: #606971;
      }
    }
    .app-main{
        padding: 0;
        background-color: #c0c4cc;
    }
}
.app-main{
    display: block;
    width: 100%; 
    // border: 1px solid red;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    .drag-box{
      flex-grow: 1;
    }
    .my-box{
      width: 300px;
      height: 140px;
      position: absolute;
      background-color: #fff;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      margin-top: -70px;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      text-align: left;
      .my-box-header{
        height: 30px;
        background-color: #606266;
        text-align: center;
        color: #fff;
        line-height: 30px;
      }
      .my-box-body{
        flex-grow: 1;
        position: relative;
        text-align: left;
      }
    }
    .shuxing-box{
      height: 220px;
      background-color: #fff;
      width: 98%;
      margin: 0 auto 30px;
      form{
        .input-group{
          margin: 10px 0;
        }
      }
    }
}
</style>

<style lang="less" scoped>
    .el-menu{
        border-right: 0;
    }
</style>

